<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="6" :xs="24">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>个人信息</span>
          </div>
          <div>
            <div class="text-center">
              <userAvatar />
            </div>
            <ul class="list-group list-group-striped">
              <li class="list-group-item">
                <svg-icon icon-class="user" />用户名称
                <div class="pull-right">{{ user.userName }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="phone" />手机号码
                <div class="pull-right">{{ user.phonenumber }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="email" />用户邮箱
                <div class="pull-right">{{ user.email }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="tree" />所属部门
                <div class="pull-right" v-if="user.dept">{{ user.dept.deptName }} / {{ postGroup }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="peoples" />所属角色
                <div class="pull-right">{{ roleGroup }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="rate" />积分记录
                <div class="pull-right">{{ points }}
                  <el-button class="my-custom-button" @click="pointsDetailClick(user.userId)">积分明细</el-button></div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="date" />创建日期
                <div class="pull-right">{{ user.createTime }}</div>
              </li>
            </ul>
			<div>
				<button v-if="state == 2 && applying == 0" style="cursor: pointer;" @click="tobeDeveloper">申请成为开发者</button>
			</div>
			<div>
				<button v-if="applying == 1" style="cursor: pointer;" @click="gotoApplyDetail">查看审核详情</button>
			</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="18" :xs="24">
        <el-card>
          <div slot="header" class="clearfix">
            <span>基本资料</span>
          </div>
          <el-tabs v-model="activeTab">
            <el-tab-pane label="基本资料" name="userinfo">
              <userInfo :user="user" />
            </el-tab-pane>
            <el-tab-pane label="修改密码" name="resetPwd">
              <resetPwd />
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>

	<!-- 添加或修改需求对话框 -->
	<el-dialog :title="title" :visible.sync="applyOpen" width="500px" append-to-body>
	  <el-form ref="form" :model="form" :rules="rules" label-width="80px">
	    <el-form-item label="姓名" prop="name">
	      <el-input v-model="form.name" placeholder="请输入姓名"/>
	    </el-form-item>
		<el-form-item label="性别">
		  <el-radio-group v-model="form.sex">
		    <el-radio label="0">男</el-radio>
		    <el-radio label="1">女</el-radio>
		  </el-radio-group>
		</el-form-item>
	    <el-col :span="24">
	      <el-form-item label="项目经历">
	        <editor v-model="form.description" :min-height="192"/>
	      </el-form-item>
	    </el-col>
	  </el-form>
	  <div slot="footer" class="dialog-footer">
	    <el-button type="primary" @click="submitForm">确 定</el-button>
	    <el-button @click="cancel">取 消</el-button>
	  </div>
	</el-dialog>

	<!-- 查看详情对话框 -->
	<el-dialog :title="title" :visible.sync="detailOpen" width="500px" append-to-body>
	  <el-form ref="form" :model="applyForm" :rules="rules" label-width="80px">
	    <el-row>
	      <el-col :span="24">
	        <el-form-item label="姓名:">{{ applyForm.name }}</el-form-item>
	      </el-col>
		  <el-col :span="24">
		    <el-form-item label="性别:">{{ applyForm.gender }}</el-form-item>
		  </el-col>
	      <el-col :span="24">
	        <el-form-item label="部门:">{{ applyForm.line }}</el-form-item>
	      </el-col>
	      <el-col :span="24">
	        <el-form-item label="项目经历:">
	          <div v-html="applyForm.description"></div>
	        </el-form-item>
	      </el-col>
	      <el-col :span="24">
	        <el-form-item label="审核状态:">{{ applyForm.checkerState }}</el-form-item>
	      </el-col>
	    </el-row>
	  </el-form>
	  <div slot="footer" class="dialog-footer">
	    <el-button @click="detailCancel">关闭</el-button>
	  </div>
	</el-dialog>

  </div>
</template>

<script>
import userAvatar from "./userAvatar";
import userInfo from "./userInfo";
import resetPwd from "./resetPwd";
import { getUserProfile } from "@/api/system/user";

export default {
  name: "Profile",
  components: { userAvatar, userInfo, resetPwd },
  data() {
    return {
      points:0,
      user: {},
      roleGroup: {},
      postGroup: {},
      activeTab: "userinfo",
	    state: 2,//0 管理，1开发，2普通人
	    applying: 0,//0 无申请，1申请中
	    applyOpen: false,
	    detailOpen: false,
	    title: "成为开发者",
	  // 表单校验
	   rules: {
	     name: [
	       {required: true, message: "课题名称不能为空", trigger: "blur"},
	       {min: 2, max: 40, message: '课题名称长度必须介于 2 和 40 之间', trigger: 'blur'}
	     ],
	     line: [
	       {required: true, message: "线条不能为空", trigger: "blur"}
	     ],
	     description: [
	       {required: true, message: "描述不能为空", trigger: "blur"}
	     ]
	   },
	   form: {},
	   applyForm: {
		   name: "小明",
		   gender: "男",
		   line: "综合部",
		   description: "这是一个项目经历描述",
		   checkerState: "审核中"
	   }
    };
  },
  created() {
    this.getUser();
  },
  methods: {
    getUser() {
      getUserProfile().then(response => {
        this.user = response.data;
        this.points = response.user.points;
        this.roleGroup = response.roleGroup;
        this.postGroup = response.postGroup;
      });
    },
    pointsDetailClick(id) {
      this.$router.push({path : '/pointsLog', query:{"id" : id}});
    },

	tobeDeveloper() {
		this.applyOpen = true
	},

	gotoApplyDetail() {
		this.detailOpen = true
	},

	cancel() {
		this.applyOpen = false
	},

	detailCancel() {
		this.detailOpen = false
	},

	//提交数据
	submitForm() {

	}
  }
};
</script>

<style>
.my-custom-button{
  margin-left: 5px;
  margin-bottom: 5px;
  font-size: 12px; /* 更改文字大小 */
  padding: 5px 5px; /* 调整内边距以改变按钮大小 */
}
</style>
